<template>
	<div class="box">
		<div class="container">
			<div class="header">
				<h2 class="title-center">{{$t('indexTitle.title191')}}</h2>
				<img class="text-right" @click="goback()" src="../assets/images/cuohao.png" alt="" />
			</div>
			<div class="logincon">
				<div>
					<div class="form">
						<div class="">

							<div class="formitem" :class="{errorww:isShowOness,error:isShowThreess}">
								<el-input v-model="name" :placeholder="$t('indexTitle.title192')" @blur="nameblur()"
									@input="nameinput()"></el-input>
								<div class="samll" v-if="!isShowOness&&!isShowThreess">{{namesmall}}</div>
							</div>
							<div class="zhuyiBoxTow" v-if="isShowOness&&!isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{namesmall}}
							</div>
							<div class="zhuyiBoxTow" v-if="!isShowOness&&isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{messageText}}
							</div>
						</div>
						<div class="">

							<div class="formitem" :class="{errorww:isShowTowss,error:isShowThreess}">
								<el-input :placeholder="$t('indexTitle.title193')" v-model="password" show-password
									@blur="psdblur()" @input="psdinput()"></el-input>
								<div class="samll" v-if="!isShowTowss&&!isShowThreess">{{psdsamll}}</div>
							</div>
							<div class="zhuyiBoxTow" v-if="isShowTowss&&!isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{psdsamll}}
							</div>
							<div class="zhuyiBoxTow" v-if="!isShowTowss&&isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{messageText}}
							</div>
						</div>
						<div class="flex">
							<el-button @click="logins()">{{$t('indexTitle.title2')}}</el-button>
						</div>
						<div class="bottom-text" @click="goregister()">{{$t('indexTitle.title194')}}
							<span>{{$t('indexTitle.title1')}}</span>
						</div>
						<div class="forget-options">
							<div>{{$t('indexTitle.title195')}}</div>
							<div>{{$t('indexTitle.title196')}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="jiazaidonghua" v-if="isloadingTowShow">
			<img src="../assets/img/loading-ani.svg" alt="">
		</div>
	</div>
</template>

<script>
	import {
		login
	} from "../utils/api.js"
	export default {
		data() {
			return {
				name: '',
				password: '',

				namesmall: '',
				psdsamll: '',

				isShowOness: false,
				isShowTowss: false,
				isShowThreess: false,
				messageText: "",
				isloadingTowShow:false,
			}
		},
		created() {

		},
		mounted() {
			if (localStorage.getItem('nameNum') && localStorage.getItem('passwordNum')) {
				this.name = localStorage.getItem('nameNum');
				this.password = localStorage.getItem('passwordNum');
			}
			// localStorage.clear();
		},
		methods: {
			nameblur() {
				if (this.name == '') {
					this.namesmall = this.$t('indexTitle.title197')
				} else {
					this.namesmall = ''
					this.isShowOness = false;
				}
			},
			nameinput() {
				if (this.name == '') {
					this.namesmall = this.$t('indexTitle.title197')
				} else {
					this.namesmall = '';
					this.isShowOness = false;
					this.isShowThreess = false;
					this.messageText = '';
				}
			},
			psdblur() {
				if (this.password == '') {
					this.psdsamll = this.$t('indexTitle.title198')
				} else {
					this.psdsamll = ''
					this.isShowTowss = false;
				}
			},
			psdinput() {
				if (this.password == '') {
					this.psdsamll = this.$t('indexTitle.title198')
				} else {
					this.psdsamll = ''
					this.isShowTowss = false;
					this.isShowThreess = false;
					this.messageText = '';
				}
			},
			logins() {
				let that = this;
				this.isloadingTowShow=true;
				this.isShowThreess = false;
				this.isShowOness = false;
				this.isShowTowss = false;
				if (this.name == '') {
					this.isShowOness = true;
					this.namesmall = this.$t('indexTitle.title197')
					this.isloadingTowShow=false;
					// this.$message.error(this.$t('indexTitle.title197'));
					return false
				}
				if (this.password == '') {
					this.isShowTowss = true;
					console.log(this.isShowTowss);
					this.psdsamll = this.$t('indexTitle.title198')
					this.isloadingTowShow=false;
					// this.$message.error(this.$t('indexTitle.title198'));
					return false;
				}
				let data = {
					name: this.name,
					password: this.password
				}
				login(data).then((res) => {
					if (res.status.errorCode == 0) {
						this.isloadingTowShow=false;
						// this.$message.success(res.status.msg);
						localStorage.setItem('nameNum', this.name)
						localStorage.setItem('passwordNum', this.password)
						localStorage.setItem('token', res.data)
						this.$emit('transfer', 1)
					} else {
						this.isShowThreess = true;
						this.isloadingTowShow=false;
						this.messageText = res.status.msg;
						// this.$message.error(res.status.msg);
					}
				}).catch((err) => {
					this.isloadingTowShow=false;
					console.log(err, 'err')
				});
			},
			goback() {
				this.$emit('transfer', 0)
			},
			goregister() {
				this.$router.push('/register')
				this.$emit('transfer', 0)
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.box {
		background-color: rgba(0, 0, 0, .7);
		height: 100%;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 1000;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.container {
		height: auto;
		width: 620px;
		padding-bottom: 5px;
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0 0 10px 0 rgba(15, 2, 20, .7);
		max-height: 90vh;
		overflow: auto;
		position: relative;
	}

	.header {
		background-color: #5235ff;
		height: 50px;
		padding: 0 20px;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.text-right {
		cursor: pointer;
		width: 30px;
		height: 30px;
		margin-right: -8px;
	}

	.title-center {
		border-bottom: 1px solid rgba(0, 0, 0, .1);
		color: #fff;
		font-size: 16px;
		font-weight: 400;
		margin: 0;
		padding: 0;
		text-align: center;
	}

	.form {
		padding: 20px 40px;
	}

	.formitem {
		margin: 0;
	}

	/deep/ .el-input__inner {
		margin-right: 0;
		width: 100%;
		appearance: none;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 3px;
		box-sizing: border-box;
		color: #222;
		display: block;
		font-size: 14px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		height: 36px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.error {
		border: 1px solid #e94951;
		/* color: #e94951; */
	}

	.error /deep/ .el-input__inner {
		border: 1px solid #e94951 !important;
		/* color: #e94951 !important; */
	}

	.errorww /deep/ .el-input__inner {
		border: 1px solid #e94951 !important;
		/* color: #e94951 !important; */
	}

	.zhuyiBoxTow {}

	.zhuyiBoxTow img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.zhuyiBoxTow {
		display: flex;
		font-size: 12px;
		margin: 5px 0 10px;
		color: #e94951;
		font-weight: 300;
	}

	.samll {
		height: 36px;
		line-height: 36px;
		text-align: left;
		width: 100%;
		color: #d22323;
		font-size: 16px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		margin-top: 5px;
	}

	.flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/deep/ .el-button {
		background-color: #5235ff;
		border: 0;
		border-radius: 22.5px;
		color: #fff;
		cursor: pointer;
		font-size: 16px;
		height: 45px;
		padding: 0 30px;
	}

	.bottom-text {
		font-size: 16px;
		margin-top: 15px;
		text-align: center;
		font-weight: 500;
	}

	.bottom-text span {
		cursor: pointer;
		color: #5235ff;
	}

	.forget-options {
		align-items: flex-end;
		display: flex;
		justify-content: flex-end;
	}

	.forget-options div {
		margin: 5px;
		color: #5235ff;
		cursor: pointer;
		text-decoration: underline;
		font-size: 12px;
	}
	.jiazaidonghua{
		height: 100px;
		width: 100px;
		background-color: #313131;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-25%);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		z-index: 99999;
	}
	.jiazaidonghua img {
		height: 45px;
		width: 45px;
	}
</style>